<template>
  <div>
    <!-- search start -->
    <div class="search" style="margin:20px;">
      <el-input placeholder="请输入用户名称/车牌号"
                style="width:300px;margin:0 10px 30px 0;float:left;"
                clearable
                v-model="searchkey">
      </el-input>
      <el-button type="primary"
                 icon="el-icon-search"
                 @click="init()">搜索</el-button>
    </div>
    <!-- search end -->

    <!-- 违章查询列表 -->
    <div class="box">
      <v-table :tableData="peccancyList.list"
               :tableLabel="tableLabel"
               @operation="handlePlateData"
               @triggerPlateTime ="handlePlateTime"
               v-loading="loading" />
      <!-- 分页器 -->
      <ubi-paging :page.sync="page"
                  :pageSize.sync="pageSize"
                  style="position:absolute;bottom:0;"
                  :pageCount="peccancyList.rows" />
    </div>
    <!--  车牌号弹框 -->
    <v-dialog :show.sync="isShowPlateDialog"
              width="30%">
      <template>
        <div class="plateInfo">
          <div class="title">
            <div>
              车辆类型
            </div>
            <div>
              排量
            </div>
          </div>

          <div>
            <div>
              {{plateInfo.type}}
            </div>
            <div>
              {{plateInfo.series}}
            </div>
          </div>
        </div>
      </template>
    </v-dialog>
    <!-- 查询车牌号弹框 -->
    <v-dialog :show.sync="isShowPlateTime"
              width="40%">
      <template>
        <el-table :data="plateInfo.data"
                  border
                  style="width: 100%">
          <el-table-column prop="plateNumber"
                           label="车牌号"
                           align="center">
          </el-table-column>
          <el-table-column prop="create_time"
                           label="查询时间"
                           align="center">
          </el-table-column>
        </el-table>
        <ubi-paging :page.sync="PlateTime"
                    :pageCount="plateInfo.last_page" />
      </template>
    </v-dialog>
  </div>
</template>

<script>
import ubiPaging from '@/views/UBI/common/ubi-data-pagination'
export default {
  name: "peccancyQuery",
  data () {
    return {
      peccancyList: [], //违章列表
      page: 1, //当前页默认值
      activeDate: '',//搜索选择日期
      pageSize: 8, //每页显示多少条数据
      searchkey: '', //搜索关键字
      tableLabel: [
        {
          label: '用户姓名',
          prop: 'name',
          empty: true
        },
        {
          label: '用户电话',
          prop: 'phone',
          empty: true
        },
        {
          label: '车牌号',
          prop: 'plate',
          type: 'text'
        },
        {
          label: '已查询车牌号',
          detail: true,
          prop: 'unionId',
          methodName: 'triggerPlateTime',
          btnText: '查询'
        },
        {
          label: '已查询次数',
          prop: 'vio_month_count',
          residueDegree: true
        },
        {
          label: '剩余查询次数(月清零)',
          prop: 'vio_month_count'
        },
        {
          label: '总查询次数',
          prop: 'vio_zong_count'
        }
      ],//违章列表数据对应的标题
      isShowPlateDialog: false,//车牌号弹框默认隐藏
      plateInfo: {},//车牌号弹框数据
      PlateTime: 1,//车牌号弹框数据当前页
      plId: '',//车牌号弹框数据ID
      isShowPlateTime: false, //查询车牌号弹框默认值
      loading: false
    }
  },
  components: {
    ubiPaging
  },
  methods: {
    async init () { //初始化渲染页面
      this.loading = true;
      let argumentsStr = {
        page: this.page,
        pageSize: this.pageSize,
        search: this.searchkey
      }
      let res = await this.api.peccancyQuery(argumentsStr).then(res => res)
      this.peccancyList = res.data;
      this.loading = false;
    },
    handlePlateData (info) { //车牌号弹框数据赋值
      this.isShowPlateDialog = true
      this.plateInfo = info
    },
    handleCurrentPage () { //处理分页
    },
    handlePlateTime (plateId = this.plId) {
      this.plId = plateId
      this.api.queryPlate({ unionId: plateId, page: this.PlateTime }).then(res => {
        this.plateInfo = res.data;
      })
      this.isShowPlateTime = true

    }
  },
  watch: {
    page () { //监听page的变化
      this.init()
    },
    pageSize () {
      this.init()
    },
    PlateTime () {
      this.handlePlateTime()
    }
  },
  mounted () {
    this.init();
  }
}
</script>

<style lang="scss" scoped>
.box {
  min-height:81vh;
  position:relative;
  padding-bottom:40px;
  box-sizing:border-box;
}
.plateInfo {
  widht: 90%;
  height: 80px;
  margin: 0 auto;
  border: solid 1px #eee;
}
.plateInfo .title {
  font-size: 15px;
  color: #333;
  border-bottom: solid 1px #eee;
}
.plateInfo > div {
  height: 40px;
}
.plateInfo > div > div:first-of-type {
  border-right: solid 1px #eee;
}
.plateInfo > div > div {
  float: left;
  width: 50%;
  height: inherit;
  text-align: center;
  line-height: 40px;
}
</style>
